<template>
  <div class="m-contain">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-user"></i>基本信息
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          学籍信息
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box" v-if="!this.$common.status.student">
        <el-form :inline="true" v-show="!this.status.isEdit&&!this.$common.status.student" :model="ruleForm"
                 :rules="rules" ref="ruleForm"
                 label-width="80px"
        >
          <el-form-item label="学号" prop="id">
            <el-input v-model="ruleForm.id" class="inputForm"></el-input>
          </el-form-item>
          <el-form-item label="分院(系所)" prop="college">
            <el-select v-model="ruleForm.college" placeholder="请选择学院" @change="searchSelectChange">
              <el-option
                  v-for="item in this.$common.college"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业名称" prop="major">
            <el-select v-model="ruleForm.major" placeholder="请选择专业">
              <el-option
                  v-for="item in this.$common.major[ruleForm.majorIndex]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="searchButton">
            <el-tooltip content="搜索">
              <el-button type="primary" icon="el-icon-search" v-if="this.status.search&&!this.$common.status.student"
                         @click="submitForm('ruleForm')" circle></el-button>
            </el-tooltip>
            <el-tooltip content="重置">
              <el-button icon="el-icon-refresh-right" @click="resetForm('ruleForm')" circle></el-button>
            </el-tooltip>
          </el-form-item>
          <el-tooltip content="增加">
            <el-button icon="el-icon-plus" @click="addGraduatesInfo"
                       v-show="!this.status.ifEdit&&this.status.add"
                       circle></el-button>
          </el-tooltip>
        </el-form>
      </div>
      <div class="editButton"
           v-show="!this.status.isEdit&&this.status.ifEdit&&this.status.hasFoundSingle">
        <el-tooltip content="编辑">
          <el-button type="primary" icon="el-icon-edit" @click="editInfo"
                     v-show="this.status.update"
                     circle></el-button>
        </el-tooltip>
        <el-tooltip content="删除">
          <el-button type="danger" icon="el-icon-delete" v-show="this.status.delete" @click="deleteInfo()"
                     circle></el-button>
        </el-tooltip>
      </div>

      <div
          v-show="this.status.hasFoundSingle&&!this.status.isEdit&&this.status.ifEdit">
        <transition name="el-fade-in-linear">
          <el-card class="singleInfo-card">
            <table border="0" height="500px" class="singleInfo">
              <tbody>
              <tr>
                <td><span class="singleInfo-key">姓名：</span></td>
                <td>{{ graduatesInfo[0].graduatesName }}</td>
                <td><span class="singleInfo-key">电话号码：</span></td>
                <td><span class="number">{{ graduatesInfo[0].graduatesTelNum }}</span></td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">性别：</span></td>
                <td>{{ graduatesInfo[0].graduatesSex }}</td>
                <td class="table-top"><span class="singleInfo-key">身份证：</span></td>
                <td><span class="number">{{ graduatesInfo[0].graduatesIdNum }}</span></td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">民族：</span></td>
                <td>{{ graduatesInfo[0].graduatesNation }}</td>
                <td><span class="singleInfo-key">学号：</span></td>
                <td><span class="number">{{ graduatesInfo[0].graduatesId }}</span></td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">年龄：</span></td>
                <td><span class="number"> {{ graduatesInfo[0].graduatesAge }} </span></td>
                <td><span class="singleInfo-key">分院(系所)：</span></td>
                <td>{{ graduatesInfo[0].graduatesCollege }}</td>

              </tr>
              <tr>
                <td><span class="singleInfo-key">出生日期：</span></td>
                <td>{{ graduatesInfo[0].graduatesBirthday }}</td>
                <td><span class="singleInfo-key">专业名称：</span></td>
                <td>{{ graduatesInfo[0].graduatesMajor }}</td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">层次：</span></td>
                <td>{{ graduatesInfo[0].graduatesLevel }}</td>
                <td><span class="singleInfo-key">班级：</span></td>
                <td>{{ graduatesInfo[0].graduatesClass }}</td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">学制：</span></td>
                <td>{{ graduatesInfo[0].graduatesEducationSystem }}年</td>
                <td><span class="singleInfo-key">培养方式：</span></td>
                <td>{{ graduatesInfo[0].graduatesTrainMode }}</td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">是否在校：</span></td>
                <td>{{ graduatesInfo[0].inSchool }}</td>
                <td><span class="singleInfo-key">学生类别：</span></td>
                <td>{{ graduatesInfo[0].graduatesCategory }}</td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">入学日期：</span></td>
                <td><span class="number">{{ graduatesInfo[0].graduatesAdmDate }}</span></td>
                <td><span class="singleInfo-key">毕业日期：</span></td>
                <td><span class="number">{{ graduatesInfo[0].graduatesGraDate }}</span></td>
              </tr>
              </tbody>
            </table>
          </el-card>

        </transition>
      </div>
      <div class="manyInfo"
           v-show="this.status.hasFoundMany&&this.status.ifEdit&&!this.status.isEdit&&!this.status.hasFoundSingle">
        <transition name="el-fade-in-linear">
          <el-card class="singleInfo-card">
            <el-table
                :data="graduatesInfo"
                style="width: 100%"
                :default-sort="{prop: '姓名', order: 'descending'}"
                height="500" :stripe="true">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="姓名：">
                      <span>{{ props.row.graduatesName }}</span>
                    </el-form-item>
                    <el-form-item label="学号：">
                      <span>{{ props.row.graduatesId }}</span>
                    </el-form-item>
                    <el-form-item label="学院：">
                      <span>{{ props.row.graduatesCollege }}</span>
                    </el-form-item>
                    <el-form-item label="专业：">
                      <span>{{ props.row.graduatesMajor }}</span>
                    </el-form-item>
                    <el-form-item label="班级：">
                      <span>{{ props.row.graduatesClass }}</span>
                    </el-form-item>
                    <el-form-item label="性别：">
                      <span>{{ props.row.graduatesSex }}</span>
                    </el-form-item>
                    <el-form-item label="电话号码：">
                      <span>{{ props.row.graduatesTelNum }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                  label="学号"
                  prop="graduatesId" sortable>
              </el-table-column>
              <el-table-column
                  label="姓名"
                  prop="graduatesName" sortable>
              </el-table-column>
              <el-table-column
                  label="专业"
                  prop="graduatesMajor" sortable>
              </el-table-column>
              <el-table-column label="操作" v-if="this.status.update&&this.status.delete">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit-outline"
                      @click="handleEdit(scope.$index, scope.row)">编辑
                  </el-button>
                  <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      class="red"
                      @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </transition>
      </div>
      <div class="editInfoForm" v-show="this.status.isEdit">
        <transition name="el-fade-in-linear">
          <el-card class="singleInfo-card">
            <el-form :inline="true" :model="graduatesInfoTemp" :rules="rules"
                     ref="ruleForm"
                     label-width="100px"
                     class="editForm">
              <el-form-item class="checkButton">
                <el-tooltip content="提交">
                  <el-button type="success" icon="el-icon-check" @click.native="postInfo"
                             circle></el-button>
                </el-tooltip>
                <el-tooltip content="取消">
                  <el-button type="danger" icon="el-icon-close" @click.native="cancelPost"
                             circle></el-button>
                </el-tooltip>
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="学号" prop="ID">
                    <el-input v-model="graduatesInfoTemp.graduatesId" class="inputForm"
                              :disabled="!status.isAdd"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="graduatesInfoTemp.graduatesName" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="性别" prop="sex">
                    <el-select v-model="graduatesInfoTemp.graduatesSex" placeholder="请选择男或女">
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="年龄" prop="age">
                    <el-input v-model="graduatesInfoTemp.graduatesAge" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="身份证" prop="idNum">
                    <el-input v-model="graduatesInfoTemp.graduatesIdNum" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="民族" prop="nation">
                    <el-input v-model="graduatesInfoTemp.graduatesNation" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="电话号码" prop="idNum">
                    <el-input v-model="graduatesInfoTemp.graduatesTelNum" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker type="date" placeholder="选择日期" v-model="graduatesInfoTemp.graduatesBirthday"
                                    value-format="yyyy-MM-dd"
                                    style="width: 88%"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="分院(系所)" prop="college">
                    <!--        <el-input v-model="graduatesInfoTemp.graduatesCollege"></el-input>-->
                    <el-select v-model="graduatesInfoTemp.graduatesCollege" placeholder="请选择学院"
                               @change="subordinateChange">
                      <el-option
                          v-for="item in this.$common.college"
                          :key="item.key"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="专业名称" prop="major">
                    <el-select v-model="graduatesInfoTemp.graduatesMajor" placeholder="请选择专业">
                      <el-option
                          v-for="item in this.$common.major[selectedKey.key]"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="层次" prop="level">
                    <!--                  <el-input v-model="graduatesInfoTemp.graduatesLevel" class="inputForm"></el-input>-->
                    <el-select v-model="graduatesInfoTemp.graduatesLevel" placeholder="请选择层次">
                      <el-option label="本科" value="本科"></el-option>
                      <el-option label="研究生" value="研究生"></el-option>
                      <el-option label="博士生" value="博士生"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="学制" prop="educationSystem">
                    <el-input v-model="graduatesInfoTemp.graduatesEducationSystem" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="培养方式" prop="trainMode">
                    <el-input v-model="graduatesInfoTemp.graduatesTrainMode" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="学生类别" prop="category">
                    <el-input v-model="graduatesInfoTemp.graduatesCategory" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="班级" prop="name">
                    <el-input v-model="graduatesInfoTemp.graduatesClass" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否在校" prop="name">
                    <el-select v-model="graduatesInfoTemp.inSchool" placeholder="请选择是或否">
                      <el-option label="是" value="是"></el-option>
                      <el-option label="否" value="否"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="入学日期" prop="admDate">
                    <el-date-picker type="date" placeholder="选择日期" v-model="graduatesInfoTemp.graduatesAdmDate"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd" style="width: 88%"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="毕业日期" prop="graDate">
                    <el-date-picker type="date" placeholder="选择日期" v-model="graduatesInfoTemp.graduatesGraDate"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd" style="width: 88%"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import bus from "../components/bus";

export default {
  name: "Graduates",
  // components: {Header},

  data() {
    return {
      selectedKey: {
        key: 0,
        editIndex: 0,
      },
      fit: 'contain',
      ruleForm: {
        id: '',
        college: '',
        major: '',
        majorIndex: 16
      },
      rules: {
        id: [
          {required: false, message: '请输入学号', trigger: 'blur'},
          {min: 10, max: 10, message: '长度为10 个字符', trigger: 'change'}
        ],
        college: [],
        ruleForm: [
          {required: false, message: '请输入学号', trigger: 'blur'},
        ]
      },
      graduatesInfo: [{
        graduatesAdmDate: null,
        graduatesAge: null,
        graduatesClass: null,
        graduatesCollege: null,
        graduatesGraDate: null,
        graduatesId: null,
        graduatesIdNum: null,
        graduatesInSchool: true,
        graduatesMajor: null,
        graduatesName: null,
        graduatesSex: null,
        graduatesTelNum: null,
        graduatesNation: null,
        graduatesLevel: null,
        graduatesCategory: null,
        graduatesTrainMode: null,
        graduatesEducationSystem: null,
        graduatesBirthday: null,
        inSchool: null,
      },],
      graduatesInfoTemp: {},
      status: {
        hasFoundSingle: false,
        hasFoundMany: false,
        isEdit: false,
        ifEdit: false,
        add: false,
        search: false,
        update: false,
        delete: false,
        loading: true,
        isAdd: false
      }
    }
  }, created() {
    const _this = this
    for (let permission of this.$store.state.userInfo.permission) {
      this.$set(this.status, permission, true)
    }
    if (this.$store.state.userInfo.roles === 'student') {

      this.$set(this.$common.status, 'student', true)
      this.$axios.get('/graduates/' + '5120173430', {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {

        _this.$common.objectValueAtoB(res.data.data, _this.graduatesInfo[0])
        if (_this.graduatesInfo[0].graduatesInSchool === true) {
          _this.$set(_this.graduatesInfoTemp, 'inSchool', "是")
        } else {
          _this.$set(_this.graduatesInfoTemp, 'inSchool', "否")
        }
        for (let i = 0; i < 16; i++) {
          if (_this.graduatesInfoTemp.graduatesCollege === _this.$common.college[i].value) {
            _this.$set(_this.selectedKey, 'key', _this.$common.college[i].key)
            break;
          }
        }
        _this.$set(_this.status, "hasFoundSingle", true)
        _this.$set(_this.status, "hasFoundMany", false)
        _this.$set(_this.status, "ifEdit", true)
        _this.$set(_this.status, "loading", false)
      })
    }
  },
  methods: {
    //查询毕业生信息按照学号或者学院与专业
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.id !== '') {
            const _this = this 
            this.$axios.get('/graduates/' + this.ruleForm.id, {
              headers: {
                "Authorization": localStorage.getItem("token")
              }
            }).then(res => {

              _this.$common.objectValueAtoB(res.data.data, _this.graduatesInfo[0])
              if (_this.graduatesInfo[0].graduatesInSchool === true) {
                _this.$set(_this.graduatesInfo[0], 'inSchool', "是")
              } else {
                _this.$set(_this.graduatesInfo[0], 'inSchool', "否")
              }
              for (let i = 0; i < 16; i++) {
                if (_this.graduatesInfo[0].graduatesCollege === _this.$common.college[i].value) {
                  _this.$set(_this.selectedKey, 'key', _this.$common.college[i].key)
                  break;
                }
              }
              _this.$set(_this.status, "hasFoundSingle", true)
              _this.$set(_this.status, "hasFoundMany", false)
              _this.$set(_this.status, "ifEdit", true)
              _this.$set(_this.status, "loading", false)
            }).catch(err => {
            })
          } else {
            if (this.ruleForm.college !== '' && this.ruleForm.major === '') {
              const _this = this;
              this.$axios.get('/graduates/list?college=' + this.ruleForm.college, {
                headers: {
                  "Authorization": localStorage.getItem("token")
                }
              }).then(res => {
                for (let index = 0; index < res.data.data.length; index++) {
                  _this.$set(_this.graduatesInfo, index, res.data.data[index])
                  if (_this.graduatesInfo[0].graduatesInSchool === true) {
                    _this.$set(_this.graduatesInfo[0], 'inSchool', "是")
                  } else {
                    _this.$set(_this.graduatesInfo[0], 'inSchool', "否")
                  }
                }
                _this.$set(_this.status, 'hasFoundMany', true);
                _this.$set(_this.status, 'hasFoundSingle', false);
                _this.$set(_this.status, "ifEdit", true)
              })
            } else if (this.ruleForm.college !== '' && this.ruleForm.major !== '') {
              const _this = this;
              this.$axios.get('/graduates/list?college=' + this.ruleForm.college + '&major=' + this.ruleForm.major, {
                headers: {
                  "Authorization": localStorage.getItem("token")
                }
              }).then(res => {
                for (let index = 0; index < res.data.data.length; index++) {
                  _this.$set(_this.graduatesInfo, index, res.data.data[index])
                  if (_this.graduatesInfo[0].graduatesInSchool === true) {
                    _this.$set(_this.graduatesInfo[0], 'inSchool', "是")
                  } else {
                    _this.$set(_this.graduatesInfo[0], 'inSchool', "否")
                  }
                }
                _this.$set(_this.status, 'hasFoundMany', true);
                _this.$set(_this.status, 'hasFoundSingle', false);
                _this.$set(_this.status, "ifEdit", true)
              })
            } else {
              this.$message.error("请至少输入一个")
            }
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //重置输入框表单
    resetForm(formName) {
      this.$set(this.ruleForm, "id", "");
      this.$set(this.ruleForm, "college", "");
      this.$set(this.ruleForm, "major", "");
      this.graduatesInfo.forEach(this.$common.resetObject)
      while (this.graduatesInfo.length > 1) {
        this.graduatesInfo.pop()
      }
      this.$set(this.status, "ifEdit", false)
      this.$set(this.status, "hasFoundSingle", false)
      this.$set(this.status, "hasFoundMany", false)
    },
    //编辑信息
    editInfo() {
      this.$common.objectValueAtoB(this.graduatesInfo[0], this.graduatesInfoTemp)
      this.$set(this.status, "isEdit", true)
    },
    //发送修改信息
    postInfo() {
      const _this = this
      let length = this.graduatesInfo.length
      if (length === 1) {
        this.$set(this.selectedKey, 'editIndex', 0)
      }
      if (!this.$common.isObjectValueEqual(this.graduatesInfoTemp, this.graduatesInfo[this.selectedKey.editIndex])) {
        this.$confirm('确认保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (_this.graduatesInfoTemp.inSchool === "是") {
            _this.$set(_this.graduatesInfoTemp, "graduatesInSchool", true)
          } else if (_this.graduatesInfoTemp.inSchool === "否") {
            _this.$set(_this.graduatesInfoTemp, "graduatesInSchool", false)
          }
          if (_this.status.isAdd) {
            let temp = {}
            _this.$common.objectValueAtoB(_this.graduatesInfoTemp, temp)
            delete temp.inSchool
            this.$axios.post('/graduates/save', temp, {
              headers: {
                "Authorization": localStorage.getItem("token")
              }
            }).then(res => {
              this.$message.success("修改成功")
              this.$set(this.status, "isAdd", false)
              this.$set(this.status, "isEdit", false)
            }).catch(err => {
              console.log(err);
            });
          } else {
            let temp = {}
            _this.$common.objectValueAtoB(_this.graduatesInfoTemp, temp)
            delete temp.inSchool
            this.$axios.post('/graduates/update', temp, {
              headers: {
                "Authorization": localStorage.getItem("token")
              }
            }).then(res => {
              this.$message.success("修改成功")
              this.$common.objectValueAtoB(_this.graduatesInfoTemp, _this.graduatesInfo[_this.selectedKey.editIndex]);
              this.$set(this.status, "isEdit", false)
              this.graduatesInfoTemp = {}
            }).catch(err => {
              console.log(err);
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });
        });
      } else {
        this.graduatesInfoTemp = {}
        this.$set(this.status, "isEdit", false)
        this.$set(this.status, "isAdd", false)
        this.$message({
          type: 'info',
          message: '未修改!'
        });
      }
    },
    //详情页面删除信息
    deleteInfo() {
      const _this = this
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.$axios.delete('graduates/' + _this.graduatesInfoTemp.graduatesId, {
          headers: {
            "Authorization": localStorage.getItem("token")
          }
        }).then(res => {
        });
        if (_this.graduatesInfo.length !== 1) {
          _this.$delete(_this.graduatesInfo, _this.selectedKey.editIndex);
          this.$set(this.status, "hasFoundMany", true)
        } else {
          _this.$common.objectValueAtoB(_this.graduatesInfo[0], _this.graduatesInfoTemp)
          this.$set(this.status, "ifEdit", false)
        }
        this.$set(this.status, "hasFoundSingle", false)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作'
        });
      });
    },
    //学院选择变化时，专业选择框跟着变化且置空
    subordinateChange(val) {
      for (let i = 0; i < 16; i++) {
        if (val === this.$common.college[i].value) {
          this.$set(this.selectedKey, 'key', this.$common.college[i].key)
          break;
        }
      }
      this.graduatesInfoTemp.graduatesMajor = "";
    },
    //学院搜索选择变化时，专业搜索选择框跟着变化且置空
    searchSelectChange(val) {
      for (let i = 0; i < 16; i++) {
        if (val === this.$common.college[i].value) {
          this.$set(this.ruleForm, 'majorIndex', this.$common.college[i].key)
          break;
        }
      }
      this.$set(this.ruleForm, 'major', '');
    },
    //取消编辑
    cancelPost() {
      this.$confirm('是否离开编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.graduatesInfoTemp = {}
        this.$set(this.status, "isEdit", false)
        this.$set(this.status, "isAdd", false)
        this.$message({
          type: 'error',
          message: '未修改!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '继续编辑'
        });
      });
    },
    //添加信息
    addGraduatesInfo() {
      this.$common.objectValueAtoB(this.graduatesInfo[0], this.graduatesInfoTemp)
      this.$set(this.status, "isEdit", true)
      this.$set(this.status, "isAdd", true)
    },
    //表格的编辑按钮事件
    handleEdit(index, row) {
      this.$common.objectValueAtoB(row, this.graduatesInfoTemp)
      this.$set(this.status, "isEdit", true)
      this.$set(this.selectedKey, "editIndex", index)
    },
    //表格的删除按钮事件
    handleDelete(index, row) {
      const _this = this
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.$axios.delete('graduates/' + row.graduatesId, {
          headers: {
            "Authorization": localStorage.getItem("token")
          }
        }).then(res => {
          _this.$delete(_this.graduatesInfo, index)
        });
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作'
        });
      });
    },
  }
}
</script>


<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.handle-box {
  /*margin-bottom: 20px;*/
}
</style>